<template>
	<view class="goods d-flex" v-for="item in props.list" :key="item.id"
		@click="navto(`/pages/goods/detail/detail?id=${item.id}`)">
		<view class="label">
			最新
		</view>
		<image :src="useQimg(item.mainImage)" mode="aspectFill" />
		<view class="df-Jc-sb df-c textDetail">
			<view class="title">
				{{sliceStr(item.title,8,true)}}
			</view>
			<view class="sales">
				已售{{item.salesNum}}件
			</view>
			<view class="price df-Jc-sb">
				<view class="">
					<text class="red">¥{{item.price}}</text>
					<text class="hui">¥{{item.price1}}</text>
				</view>
				<image src="../static/icon/car.png" mode="" class="btn" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import useQimg from "@/hooks/qimg.js"
	import { sliceStr, navto } from "@/common/func.js"
	let props = defineProps({ list: Array })
</script>
<style lang="scss" scoped>
	.goods {

		padding: 20rpx;
		position: relative;
		border-bottom: 1rpx solid #f8f8f8;

		.label {
			border-radius: 10rpx 0 10rpx 0;
			left: 20rpx;
			top: 20rpx;
			padding: 6rpx 14rpx;
			background: #F03C00;
			position: absolute;
			@include fz(24, #FFFFFF);
		}

		>image {
			margin-right: 28rpx;
			@include boxs(240rpx, 240rpx, 10);
		}

		.textDetail {
			width: 440rpx;

			.title {
				padding: 10rpx 0;
				font-size: 28rpx;
			}

			.sales {
				@include fz(24, #B5B5B5);
			}

			.price {
				font-size: 24rpx;
				line-height: 58rpx;

				.red {
					color: #EF5B26;
				}

				.hui {
					margin-left: 10rpx;
					color: #B5B5B5;
				}

				.btn {

					@include boxs(38rpx, 38rpx);
				}
			}
		}

	}
</style>
